<template>

    <div id="ownerinfo">
<!--        <a-collapse v-model="activeKey" @change="changeActivekey">-->
        <a-collapse v-model="activeKey">
            <a-collapse-panel v-for="(item, i) in this.data.owners"
                              :key="'des' + i"
                    >
                <header slot="header">
                    {{item.name}}
                    <a-tag :color="item.relation == '业主'?'red':'purple'">{{item.relation}}</a-tag>
                    <a-tag :color="item.instate?'green':'blue'">{{(item.instate ? '在住':'未住')}}</a-tag></header>
                <a-descriptions size="small">
                    <a-descriptions-item>
                        <a-card hoverable style="width: 100%">
                            <img
                                    slot="cover"
                                    alt="avatar"
                                    src="http://news.chinaxiaokang.com/uploads/image/20181203/1543796794754883.jpg"
                            />
                            <a-card-meta title="基础信息">

                                <template slot="description">
                                    <div class="div-title"><label class="my-label">身份证：</label></div>
                                    <div class="div-content">{{item.idcard}}</div>
                                    <br />
                                    <div class="div-title"><label class="my-label">性别：</label></div>
                                    <div class="div-content">{{item.sex == 'male'?'男':'女'}}</div>
                                    <br /><div class="div-title"><label class="my-label">民族：</label></div>
                                    <div class="div-content">{{item.people}}</div>
                                    <br /><div class="div-title"><label class="my-label">出生日期：</label></div>
                                    <div class="div-content">{{item.birthday}}</div>
                                    <br />
                                    <div class="div-title"><label class="my-label">地址：</label></div>
                                    <div class="div-content">{{item.address}}</div>
                                </template>
                            </a-card-meta>
                            <a-card-meta title="联系方式">

                                <template slot="description">
                                    <div class="div-title"><label class="my-label">手机：</label></div>
                                    <div class="div-content">{{item.cellphone}}</div>
                                    <br />
                                    <div class="div-title"><label class="my-label">电话：</label></div>
                                    <div class="div-content">{{item.telphone}}</div>
                                    <br />
                                    <div class="div-title"><label class="my-label">紧急联系电话：</label></div>
                                    <div class="div-content">{{item.importphone}}</div>
                                    <br />
                                    <div class="div-title"><label class="my-label">联系地址：</label></div>
                                    <div class="div-content">{{item.contactaddress}}</div>
                                </template>
                            </a-card-meta>
                            <a-card-meta title="工作信息">

                                <template slot="description">
                                    <label class="my-label">工作单位：</label>
                                    <div class="div-content">{{item.company}}</div>
                                    <br />
                                    <label class="my-label">职业：</label>
                                    <div class="div-content">{{item.workname}}</div>
                                    <br />
                                    <label class="my-label">职位：</label>
                                    <div class="div-content">{{item.worklevel}}</div>
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-descriptions-item>
<!--                    <a-descriptions-item>-->
<!--                        <img :alt="item.name" style="width: 100px" :src="imageUrl[i]" />-->

<!--                    </a-descriptions-item>-->
<!--                    <a-descriptions-item>-->
<!--                        <a-card size="small" title="基本信息">-->
<!--                            <a-descriptions>-->
<!--                                <a-descriptions-item label="身份证">-->
<!--                                    {{item.idcard}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="性别">-->
<!--                                    {{item.sex == 'male'?'男':'女'}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="民族">-->
<!--                                    {{item.people}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="出生日期">-->
<!--                                    {{item.birthday}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="地址">-->
<!--                                    {{item.address}}-->
<!--                                </a-descriptions-item>-->
<!--                            </a-descriptions>-->
<!--                        </a-card>-->
<!--                    </a-descriptions-item>-->
<!--                    <a-descriptions-item>-->
<!--                        <a-card size="small" title="联系方式">-->
<!--                            <a-descriptions>-->
<!--                                <a-descriptions-item label="手机">-->
<!--                                    {{item.cellphone}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="电话">-->
<!--                                    {{item.telphone}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="紧急联系电话">-->
<!--                                    {{item.importphone}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="联系地址">-->
<!--                                    {{item.contactaddress}}-->
<!--                                </a-descriptions-item>-->
<!--                            </a-descriptions>-->
<!--                        </a-card>-->
<!--                    </a-descriptions-item>-->
<!--                    <a-descriptions-item>-->
<!--                        <a-card size="small" title="工作信息">-->
<!--                            <a-descriptions>-->
<!--                                <a-descriptions-item label="工作单位">-->
<!--                                    {{item.company}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="职业">-->
<!--                                    {{item.workname}}-->
<!--                                </a-descriptions-item>-->
<!--                                <a-descriptions-item label="职位">-->
<!--                                    {{item.worklevel}}-->
<!--                                </a-descriptions-item>-->
<!--                            </a-descriptions>-->
<!--                        </a-card>-->
<!--                    </a-descriptions-item>-->
                    <a-descriptions-item label="业主标签">
                        <a-tag color="orange" v-for="(item, i) in item.tags" :key="'tag' + i">{{item.tag}}</a-tag>
                    </a-descriptions-item>
                </a-descriptions>
            </a-collapse-panel>
            <a-collapse-panel header="车辆信息">
                <a-card size="small" v-for="(item, i) in this.data.carinfos"
                        :key="'car' + i">
                    <label class="ant-descriptions-item-label">车牌：</label>{{item.number}}
                    <br />
                    <label class="ant-descriptions-item-label">品牌：</label>{{item.brand}}
                </a-card>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script>
    import {doPostUnlencoded} from "@/utils/requestUtil";
    const data = {
        id: 20,
        name: 'ssfsd',
        owners: [
            {
                id: 1,
                name: '东哥',
                relation: '业主',
                instate: true,
                idcard: '332601196202181212',
                sex: 'male',
                pepole: '汉',
                tags: [
                    {
                        id: 1,
                        tag: '大叔',
                    },
                    {
                        id: 2,
                        tag: '吹水'
                    }
                ]
            },
            {
                id: 2,
                name: '东哥2',
                relation: '租户',
                instate: false,
                idcard: '332601196202181212',
                sex: 'male',
                pepole: '汉',
                tags: [
                    {
                        id: 1,
                        tag: '大叔',
                    },
                    {
                        id: 2,
                        tag: '胖子'
                    }
                ]
            }
        ],
        carinfos: [
            {
                id: 1,
                number: '浙JB62345',
                brand: '宝马',
            }
        ]
    }
    export default {
        inject: ['setTitle'],
        name: "propertydetail",
        data() {
            return {
                data: data,
                activeKey: ['des0'],
                imageUrl: [],
                params: {
                    id: this.$route.params.detailid
                }
            }
        },
        beforeMount() {
            doPostUnlencoded("/fygcp/api/propertydetail/", this.params).then((res) => {

                if (res.success) {
                    this.data = res.data;
                    this.setImg(res.data.owners);
                    this.setTitle(res.data.name);
                }
                console.info(this.imageUrl);
            }).catch((err) => {
                this.$message.error("status:" + err.status + " msg:访问被拒绝。" )
            })
            // this.data = data;
        },
        methods: {
            setImg(data) {
                for (let i = 0; i < data.length; i ++) {
                    this.getImg(data[i].imgkey);
                }
            },
            changeActivekey(key) {
                console.log(key);
            },
            getImg(key) {
                let params = {
                    filename: key,
                    bucket: 'fygproperty'
                }
                doPostUnlencoded("/enroll/oss/getobjwithbucket", params).then((res) => {
                    if (res.result) {
                        // this.imageUrl = res.data;
                        this.imageUrl.push(res.data);
                        // this.imageUrl[i] = res.data;
                    }
                }).catch((err) => {

                    console.info(err);
                });
            }
        }
    }
</script>

<style>
    #ownerinfo .ant-descriptions-item-label {
        font-size: 12px;
        font-weight: bold;
    }
    #ownerinfo .ant-card-cover {

    }
    #ownerinfo .ant-card-body {
        padding: 10px 10px 0 10px;
    }
    #ownerinfo .ant-card-meta {
        padding: 0 0 10px 0px;
    }
    #ownerinfo .ant-card-meta-title {
        background-color: whitesmoke;
        font-size: 14px;
    }
    #ownerinfo .ant-card-meta-description {
        color: #000c17;
    }
    #ownerinfo .my-label {
        font-size: 12px;
        font-weight: bold;
    }
    #ownerinfo .div-title {
        width: 40%;
        float: left;
        display: inline;
    }
    #ownerinfo .div-content {
        width: 60%;
        text-align: right;
        float: right;
        display: inline;
    }
</style>

<style scoped>

</style>
